<template>
  <div>
    <a-input
      v-model="ipStart"
      style="max-width: 200px"
      :placeholder="$t('deviceDetail.enterBaddress')"
      @change="handelChange"
    />
    -
    <a-input
      v-model="ipEnd"
      style="max-width: 200px"
      :placeholder="$t('deviceDetail.enterEaddress')"
      @change="handelChange"
    />
  </div>
</template>
<script>
export default {
  name: 'DhcpIpRange',
  props: {
    range: {
      type: String,
      default: '-',
    },
  },
  data() {
    return {
      ipStart: '',
      ipEnd: '',
    };
  },
  watch: {
    range(n) {
      this.init(n);
    },
  },
  mounted() {
    this.init(this.range);
  },
  methods: {
    init(range) {
      const arr = range.split('-');
      if (arr.length == 2) {
        this.ipStart = arr[0];
        this.ipEnd = arr[1];
      } else {
        this.ipStart = '';
        this.ipEnd = '';
      }
    },
    handelChange() {
      this.$emit('change', `${this.ipStart}-${this.ipEnd}`);
    },
  },
};
</script>
